<template>
  <div id="att">
    <h1>{{ msg }}</h1>
    <p>{{zs}}</p>
    <p>{{$store.state.count}}-{{count}}</p>
    <p>
        <button @click="$store.commit('jia',{a:10})">jia</button>
         <button @click="cd">cd</button>
    </p>

    <p>
        <button @click="jiaplus">jia</button>
         <button @click="cdlus">cd</button>
    </p>

  </div>
</template>

<script>
import {mapState,mapMutations, mapGetters,mapActions} from 'vuex';
export default {
  name: 'att',
  data () {
    return {
      msg: 'Hello vuex'
    //   count:0
    }
  },
  // 3种方式
  computed:{ 
      ...mapState(["count","zs"]),
      ...mapGetters(["count"])

   },
   methods: {
      ...mapMutations([
          'jia',
          'cd'
      ]),
      ...mapActions([
         'jiaplus'
      ]),
      ...mapActions({
         cdlus:'cdlus'
      })
  }


 //   computed:mapState({ 2中方式
//         count:state=>state.count,
//         zs:state=>state.zs
//  }),

//   }
//   computed:{  1中方式
//       count(){
//           return this.$store.state.count+1
//       },
//       zs(){
//           return this.$store.state.zs
//       }
//   }

}
</script>

<style scoped>

</style>
